<template>
  <el-dialog
    class="gl_dialog_TitleLine gl_dl_footer"
    width="660px"
    title="订单发货"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    append-to-body
  >
    <div style="width: 80%;">
      <el-form ref="deliverForm" :model="deliverForm" :rules="rules" size="mini" @submit.native.prevent>
        <el-form-item label="收货人">
          <span>{{ deliverForm.name }}</span>
        </el-form-item>
        <el-form-item label="手机号码">
          <span>{{ deliverForm.phone }}</span>
        </el-form-item>
        <el-form-item label="收货地址">
          <span>{{ deliverForm.address }}</span>
        </el-form-item>
        <el-form-item prop="express" label="快递选择">
          <el-select v-model="deliverForm.express" placeholder="请选择快递" value-key="id" style="width: 100%;" @change="changeExpress">
            <el-option v-for="item in expressList" :key="item.id" :value="item" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="number" label="快递单号">
          <el-input v-model="deliverForm.number" placeholder="请输入" size="mini" style="width: 100%;" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="close()">取 消</el-button>
      <el-button :loading="loading" size="mini" type="primary" @click="submit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import validator from '@/lib/validate/index.js';
import {
  api_GET_MallStoreCurrent,
  api_GET_MallStoreExpress
} from '@/extend/api/shoppingmallswaggerApi/app.js';
import {
} from '@/lib/form/shoppingmall/swaggerForm.js';
import {
  api_PUT_TradeBusinessOrderExpress
} from '@/extend/api/swaggerApi/app.js';
import {
} from '@/lib/form/swaggerForm';
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      storeId: '', // 店铺id
      expressList: [],
      deliverForm: {
        name: '',
        phone: '',
        address: '',
        express: '',
        number: '',
        orderNo: ''
      },
      rules: {},
      rules1: {
        express: [validator.required('快递选择不能为空')]
      },
      rules2: {
        express: [validator.required('快递选择不能为空')],
        number: [validator.required('快递单号不能为空')]
      }
    };
  },
  methods: {
    open(orderNo, name, phone, address, express, expressInfo) {
      this.getMallStoreCurrent();
      if (express.name && express.name === '无') {
        express.id = 'nothing';
      }
      this.rules = expressInfo && express.id !== 'nothing' ? this.rules2 : this.rules1;
      this.dialogVisible = true;
      this.deliverForm.orderNo = orderNo;
      this.deliverForm.name = name;
      this.deliverForm.phone = phone;
      this.deliverForm.address = address;
      this.deliverForm.express = express || '';
      this.deliverForm.number = expressInfo || '';
    },
    close() {
      this.rules = {};
      this.$refs['deliverForm'].clearValidate();
      this.dialogVisible = false;
    },
    // 修改快递选择
    changeExpress(val) {
      this.$refs['deliverForm'].clearValidate();
      if (val.id === 'nothing') {
        this.rules = this.rules1;
      } else {
        this.rules = this.rules2;
      }
    },
    // 获取当前用户店铺信息
    getMallStoreCurrent() {
      var that = this;
      api_GET_MallStoreCurrent({ IncludeStatus: true }).then(res => {
        that.storeId = res.id || '';
        that.getExpress();
      }, error => {
        const _msg = error.error.message || error.message;
        that.$message({ type: 'error', message: _msg });
      });
    },
    // 获取快递列表
    getExpress() {
      var that = this;
      const form = {
        StoreId: that.storeId
      };
      api_GET_MallStoreExpress(form).then(res => {
        that.expressList = res.items || [];
        that.expressList.unshift({
          id: 'nothing',
          name: '无'
        });
      }).catch(() => {
        const _msg = error.error.message || error.message;
        that.$message({ type: 'error', message: _msg });
      });
    },
    submit() {
      var that = this;
      if (!(this.deliverForm.express && this.deliverForm.express.id)) {
        this.$message({ type: 'warning', message: '请选择快递！' });
        return;
      }
      if (this.deliverForm.number === '' && (this.deliverForm.express.id && this.deliverForm.express.id !== 'nothing')) {
        this.$message({ type: 'warning', message: '请填写快递单号！' });
        return;
      }
      this.loading = true;
      let expressId = this.deliverForm.express && this.deliverForm.express.id;
      expressId = expressId === 'nothing' ? '' : expressId;
      const form = {
        expressId: expressId,
        expressName: this.deliverForm.express && this.deliverForm.express.name,
        expressInfo: this.deliverForm.number,
        orderNo: this.deliverForm.orderNo
      };
      api_PUT_TradeBusinessOrderExpress(form).then(res => {
        that.loading = false;
        if (res) {
          that.$message({ type: 'success', message: '发货成功' });
          that.close();
          that.$parent.getOrder();
        }
      }).catch(() => {
        that.loading = false;
        const _msg = error.error.message || error.message;
        that.$message({ type: 'error', message: _msg });
      });
    }
  }
};
</script>

<style>

</style>
